<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>基础表单</title>
    <link rel="stylesheet" href="__LIBS__/layui/css/layui.css" />
    <link rel="stylesheet" href="__MODULE__/admin.css?v=317" />
    <link rel="stylesheet" href="__JS__/plugins/webuploader/webuploader.css?v=1.0.1" ><!--webUploader上传组件-->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        #formBasForm {
            width: 800px;
        }

        .layui-form-item {
            display: flex;
        }

        .layui-input-block {
            flex: 14;
        }

        .layui-input-block {
            margin-left: 20px !important;
            min-height: 36px;
        }
        .layui-tab-title a{
            color: #fff;
        }
        #formBasForm .layui-form-item {
            margin-bottom: 25px;
        }
    </style>
</head>

<body>
    <!-- 加载动画 -->
    <div class="page-loading">
        <div class="ball-loader">
            <span></span><span></span><span></span><span></span>
        </div>
    </div>
    <!-- 正文开始 -->
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-card-body">
                <ul class="layui-tab-title" style="margin-bottom: 20px;">
                    <li>请下载excel模板</li>
                    <li class="layui-btn layui-btn-warm"><a ew-href="{php}echo ((int)$_SERVER['SERVER_PORT'] == 80 ? 'http://' : 'https://') . $_SERVER['HTTP_HOST'];{/php}/uploads/exam_tpl/xueyuan.xls" ew-title="学员表模板下载">学员表</a></li>
                </ul>
                <!-- 表单开始 -->
                <form class="layui-form" id="formBasForm" lay-filter="formBasForm" enctype="multipart/form-data">
                    <div class="layui-form-item" >
                        <label class="layui-form-label layui-form-required">用户分组：</label>
                        <div class="layui-input-block">
                            <input id="class_id" name="class_id" placeholder="请选择分组" class="layui-hide" required lay-verify="required" />
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label layui-form-required">导入学员：</label>
                        <input type="hidden" name="path" id="lay-file" lay-verify="music" >
                        <div class="layui-upload layui-input-block">
                            <div id="lay-upload"><i class="layui-icon">&#xe621;</i> 导入学员</div>
                        </div>
                        <p id="uploadok"></p>
                    </div>
                </form>
                <!-- //表单结束 -->
            </div>
        </div>
    </div>

    <!-- js部分 -->
    <script type="text/javascript" src="__LIBS__/layui/layui.js"></script>
    <script type="text/javascript" src="__NJS__/common.js?v=317"></script>
    <script src="__LIBS__/jquery/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="__LIBS__/tinymce/tinymce.min.js"></script>
    <script src="__JS__/plugins/webuploader/webuploader.js"></script><!--webUploader上传组件-->
    <script src="__LIBS__/jquery/jquery-3.2.1.min.js"></script>
    <script>
        layui.use(['layer', 'form', 'laydate', 'jquery','upload','admin','cascader'], function () {
            var $ = layui.jquery;
            var layer = layui.layer;
            var form = layui.form;
            var laydate = layui.laydate;
            var upload = layui.upload;
            var admin = layui.admin;
            var cascader = layui.cascader;
            cascader.render({
                elem: '#class_id',
                reqData: function (values, callback, data) {
                    $.ajax({
                        url:"{:url('admin/vipclassify/classify_list_json')}",
                        success:function(res){
                            //console.log(res)
                            if(res.code==0){
                                callback(res.data)
                            }
                        }
                    })
                },
                onChange: function (values, data) {
                    console.log(values);
                    console.log(data);
                }
            });
            /*用户excel上传*/
            var uploaderMusic = WebUploader.create({
                auto: true,// 选完文件后，是否自动上传。
                server: "{:url('admin/vip/daoru_user')}",// 文件接收服务端。
                duplicate :true,// 重复上传文件，true为可重复false为不可重复

                pick: {
                    id: "#lay-upload",// 选择文件的按钮
                    multiple: false,//true多文件上传 false单文件上传
                },
                fileSingleSizeLimit: 300*1024*1024, //限制上传单个文件大小，单位是B，1M=1024000B
                accept: {
                    title: 'Files',
                    extensions: 'xls,xlsx',
                    mimeTypes: '.xls,.xlsx'
                },
                //上传失败
                'uploadError':function(file){
                    $('#uploadok').html('<span style="color: #FF5722;">上传失败,请检查存储配置!</span>');
                }
            });
            //当文件被加入队列之前触发
            uploaderMusic.on('beforeFileQueued', function (file) {
                if ($("#class_id").val() == '') {
                    layer.alert('请先选择用户分组！');
                    return false;
                }
            });
            //当文件被加入队列之前触发
            uploaderMusic.on('uploadBeforeSend', function (obj, data, headers) {
                data.formData = JSON.stringify({ "class_id": $("#class_id").val()});
                console.log('加入队列之前',data)
            });
            //资源加入队列
            uploaderMusic.on( 'fileQueued', function( file ) {
                console.log(file)
                window.file = file;
                $("#uploadok").html('<div id="' + file.id + '" style="margin: 0 10px 10px 0;">'+file.name+" 大小:"+(file.size/1024/1024).toFixed(2)+"MB"+'</div><p id="lay-msg">准备就绪等待上传</p>')
            });
            if(uploaderMusic.isInProgress()){
                $("#uploadok").html('<p id="lay-msg">正在上传... <i class="layui-icon layui-icon-loading-1 layui-icon layui-anim layui-anim-rotate layui-anim-loop"></i></p>')
            }
            uploaderMusic.on('uploadSuccess', function (file,data) {
                console.log('上传完成后',file,data)
                if(data.code ==200){
                    $("#uploadok").html('<div id="' + file.id + '" style="margin: 0 10px 10px 0;">'+file.name+" 大小:"+(file.size/1024/1024).toFixed(2)+"MB"+'</div><p id="lay-msg" style="color: red;">上传成功</p>')
                }else if(data.code ==1){
                    $("#uploadok").html('<div id="' + file.id + '" style="margin: 0 10px 10px 0;">'+file.name+" 大小:"+(file.size/1024/1024).toFixed(2)+"MB"+'</div><p id="lay-msg" style="color: red;">试用账号暂无权限</p>')
                }
            });
            //错误信息提示
            uploaderMusic.on('error', function (code) {
                switch (code) {
                    case 'F_EXCEED_SIZE':
                        layer.msg('资源大小不得超过'+  uploaderMusic.options.fileSingleSizeLimit/1024/1024 + 'MB',{icon:2,time:1500,shade:0.1});
                        break;
                    case 'Q_TYPE_DENIED':
                        layer.msg('请上传正确的资源格式',{icon:2,time:1500,shade:0.1});
                        break;
                    default:
                        layer.msg('上传错误，请刷新',{icon:2,time:1500,shade:0.1});
                        break;
                }
            });
        });
    </script>
</body>

</html>